<template>
  <div class="app-container">
    <!-- <strong>讲师列表</strong> -->
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="教师名"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="教师头衔">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="讲师"/>
          <el-option :value="3" label="助理讲师"/>
          <el-option :value="4" label="教员"/>
        </el-select>
      </el-form-item>

      <el-form-item label="添加时间">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="更新时间">
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="教师手机号">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="教师简介">
              <span>{{ props.row.intro }}</span>
            </el-form-item>
            <el-form-item label="教师资历">
              <span>{{ props.row.career }}</span>
            </el-form-item>
            <el-form-item label="教师职位">
<!--              <span>{{ props.row.level }}</span>-->
              <span v-if="props.row.level === 1">非主持工作的中层副职</span>
              <span v-if="props.row.level === 2">教师</span>
              <span v-if="props.row.level === 3">行政干事</span>
              <span v-if="props.row.level === 4">行政岗主管</span>
              <span v-if="props.row.level === 5">教研室主任</span>
              <span v-if="props.row.level === 6">系主任</span>
            </el-form-item>
            <el-table-column label="创建时间" prop="gmtCreate" align="center"/>

            <el-table-column label="更新时间" prop="gmtModified" align="center"/>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="教师工号" prop="jobNumber" align="center"/>

      <el-table-column label="教师姓名" prop="collegeName" align="center"/>

      <el-table-column label="教师所属学院" prop="college" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.college === 1">商学院</span>
          <span v-if="scope.row.college === 2">管理学院</span>
          <span v-if="scope.row.college === 3">外语学院</span>
          <span v-if="scope.row.college === 4">堪萨斯国际学院</span>
          <span v-if="scope.row.college === 5">电信与智能制造学院</span>
          <span v-if="scope.row.college === 6">计算机与软件工程学院</span>
          <span v-if="scope.row.college === 7">艺术设计学院</span>
          <span v-if="scope.row.college === 8">医学院</span>
          <span v-if="scope.row.college === 9">文法学院(语委办)</span>
          <span v-if="scope.row.college === 10">体育学院</span>
          <span v-if="scope.row.college === 11">新闻与传播学院</span>
          <span v-if="scope.row.college === 12">建筑工程学院</span>
          <span v-if="scope.row.college === 13">音乐戏剧学院</span>
          <span v-if="scope.row.college === 14">马克思主义学院</span>
          <span v-if="scope.row.college === 15">国际教育学院</span>
          <span v-if="scope.row.college === 16">教育学院</span>
          <span v-if="scope.row.college === 17">继续教育学院</span>
          <span v-if="scope.row.college === 18">国际语言中心</span>
        </template>
      </el-table-column>

      <el-table-column label="是否禁用账号" prop="disable" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.disable === '0'">已禁用</span>
          <span v-if="scope.row.disable === '1'">未禁用</span>
        </template>
      </el-table-column>

      <el-table-column label="是否激活" prop="activation" align="center"/>

      <el-table-column label="是否导入课表" prop="disable" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.tcollege === 0">未导入</span>
          <span v-if="scope.row.tcollege === 1">已导入</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/adminTeacher/updateTeacher/'+scope.row.id">
            <el-button type="text" size="4px" icon="el-icon-edit" class="edit-button">修改</el-button>
          </router-link>
          <el-button type="text" size="4px" class="disable-button" @click="removeDataById(scope.row.jobNumber)":style="{ color: scope.row.disable === '1' ? '' : '#55AA00' }">
            <i :class="scope.row.disable === '1' ? 'el-icon-circle-close' : 'el-icon-circle-check'" :style="{ color: scope.row.disable === '1' ? '' : '#55AA00' }"></i>
            {{ scope.row.disable === '1' ? '禁用' : '启用' }}
          </el-button>
          <el-button type="text" size="4px" icon="el-icon-delete" class="delete-button" @click="deleteTeacherById(scope.row.jobNumber)">删除
          </el-button>

          <el-button
            type="text"
            size="4px"
            class="delBut non"
            @click="statusHandle(scope.row.jobNumber, scope)"

          >
            导入课表
            <input type="file" ref="fileInput" @change="handleFileChange" style="display: none">
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />


  </div>
</template>

<script>
// import teacher from '@/api/adm/teacherAdmin'
import * as teacher from '@/api/adm/teacherAdmin'
import * as member from '@/api/member/member'

    export default {
      data() {
        return {
          list: null, // 查询之后接口返回集合
          page: 1, // 当前页
          limit: 10, // 每页记录数
          total: 0, // 总记录数
          teacherQuery: {} // 条件封装对象
        }
      },
      created() {
        this.getList()
      },
      methods: {
        // 条件查询教师信息
        getList(page = 1) {
          this.page = page
          teacher.findAllTeacher(this.page, this.limit, this.teacherQuery)
            .then(response => {
              // 请求成功
              // response接口返回的数据
              // console.log(response)
              this.list = response.data.rows
              this.total = response.data.total
              console.log(this.list)
              console.log(this.total)
            })
        },

        //清空要查询的内容
        resetData() {
          this.teacherQuery = {}
          this.getList()
        },

        // 禁用教师账号
        removeDataById(jobId){
          teacher.disableTeacher(jobId).then(response => {
            //成功了
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.getList()
          })
        },

        //删除教师账号
        deleteTeacherById(jobId){
          teacher.deleteTeacher(jobId).then(response => {
            //删除成功
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getList()
          })
        },
        //导入课表
        //状态修改
        statusHandle(id, scope) {
          if (!this.isFileSelected && !this.isUploading) {
            console.log(id);
            this.isFileSelected = true;
            this.$refs.fileInput.click();
            this.currentId = id;
            this.scope = scope; // 保存scope
          }
        },
        //异步
        async handleFileChange(event) {
          const file = event.target.files[0];
          if (file) {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('fileName', file.name);

            this.isUploading = true; // 文件正在上传
            const scope = this.scope; // 获取保存的scope

            try {
              // await importClass(this.currentId, formData);
              member.importClass(this.currentId, formData).then(response => {
                console.log("上传的文件名为：" + file.name);
                this.$message.success('导入文件：' + file.name + '成功');

                // 使用保存的scope对象
                scope.row.status = "1";
                console.log(scope.row.status);
                // 进行文件处理操作，比如上传到服务器或读取文件内容
              })
            } catch (error) {
              // 处理请求错误
              console.error(error);
            }
            this.isUploading = false; // 文件上传完成
          } else {
            console.log("未选择文件");
            this.$message.error("未选择文件");
          }
          this.isFileSelected = false;
        },

        //修改教师信息
        updateDataById(){
        },

        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`)
        },
        handleDelete(index, row) {
        }
      }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.edit-button {
  color: rgb(195, 176, 145); /* 紫色 */
}

.disable-button {
  color: rgb(81, 161, 187); /* 蓝色 */
}

.delete-button {
  color: rgb(255, 140, 140); /* 红色 */
}
.delete-button1 {
  color: rgb(17, 177, 26); /* 红色 */
}
</style>
